<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <link rel="stylesheet" href="js/layui/css/layui.css" media="all">
    <title>个人中心</title>
    <style>
        body {
            text-align: center;
            margin-top: 20px;
        }

        ul {
            /* margin-left: 0px; */
            padding: 0;
            text-align: left;
        }

        ul li {
            list-style: none;
            margin: 20px 0;
            padding: 0 0;
        }

        .title {
            border: #5FB878 1px solid;
            margin-bottom: 30px;
        }


        .back {
            margin-bottom: 3px;
            text-align: left;
        }

        .layui-panel {
            margin: 0 15px;
            border-color: #5FB878;
        }
    </style>
</head>
<body>
<div class="back">
    <button type="button" id="backBtn" class="layui-btn layui-btn-sm layui-btn-primary" style="border: none;">
        <i class="layui-icon layui-icon-left">返回</i>
    </button>
</div>
<div class="title">出行订单</div>
<div class="layui-row layui-col-space12" id="busOrderDiv">
</div>
<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(function () {

        $("#backBtn").on("click", function () {
            window.location.href = "personal-center.html";
        });

        $.ajax({
            url: baseUrl + "bus/busOrderList.json",
            contentType: "json",
            success: function (data) {
                if (data.code == "200") {
                    var busOrderList = data.pageInfo.list;
                    busOrderList.forEach(function (busOrder) {
                        $("#busOrderDiv").append("<div className=\"layui-col-md12\"> " +
                            "<div class=\"layui-panel\"> " +
                            "<div style=\"padding: 20px;\"> " +
                            "<ul> " +
                            "<li>订单号:" + busOrder.id + "</li> " +
                            "<li>巴士编号:" + busOrder.busId + "</li> " +
                            "<li>出行时间:" + busOrder.date + "</li> " +
                            "<li>起点:" + busOrder.startPoint + "</li> " +
                            "<li>终点:" + busOrder.endPoint + "</li> " +
                            "<li>待支付</li> " +
                            "</ul> " +
                            "</div> " +
                            "</div> " +
                            "</div>");
                    });
                }
            }
        });

    });
</script>
</body>
</html>
